<template>
  <div class="app-amin1">
    <div class="main" ref="chart"></div>
    <!-- <div class="big-main" ref="lianechart"></div> -->
  </div>
</template>
          
          <script>
import * as echarts from "echarts";
export default {
  name: "MyData",
  data() {
    return {};
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      const myChart = echarts.init(this.$refs.chart); //初始化容器
      // 饼图数据
      let data = [
        { value: 735, name: "数控系统" },
        { value: 1048, name: "i/o" },
        { value: 484, name: "电机" },
        { value: 580, name: "伺服驱动" }
      ];
      data.sort((a, b) => b.value - a.value);

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        title: {
          text: "购买客户排名"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["系统", "伺服", "i/o", "电机"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: "30%",
            data: data.map((item, index) => {
              // 为每一项指定颜色
              const gradientColor = new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "rgb(82,168,245)" }, // 渐变色起始颜色
                  { offset: 1, color: "#fff" } // 渐变色结束颜色
                ]
              );

              return {
                value: item.value,
                name: item.name,
                itemStyle: {
                  color: gradientColor
                }
              };
            })
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
          <style  scoped>
.app-amin1 {
  /* width: 100%; */
  /* margin-top: 15px; */
  height: calc(50vh - 120px);
  width: 700px;
  display: flex;
  margin-right: 10px;
  position: relative;

  /* align-items: center; */
  /* justify-content: space-around; */
}
.main {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 15px;
  padding: 15px;
  box-sizing: border-box;
}
.todetail {
  position: absolute;
  cursor: pointer;
  right: 10px;
  font-size: 12px;
  top: 20px;
  z-index: 2;
}
.big-main {
  width: 500px;
  background: #fff;
  height: 300px;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 10px;
}
</style>